<template>
  <el-dialog title="获取密码" :model-value="visible" width="600px" :fullscreen="mobile">
    <el-form :model="form" :rules="formRules" ref="formRef" label-width="100px">
      <el-form-item label="智能锁" required>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="groupId">
              <el-select v-model="form.groupId">
                <el-option label="分组一" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item prop="roomId">
              <el-select v-model="form.roomId">
                <el-option label="公寓101" value="101"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="1">限时</el-radio>
          <el-radio label="2">永久</el-radio>
          <el-radio label="3">循环</el-radio>
          <el-radio label="4">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.type === '4'">
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入6-9位数字密码"></el-input>
        </el-form-item>
        <el-form-item label="永久">
          <el-switch v-model="form.forever"></el-switch>
        </el-form-item>
      </template>
      <el-form-item label="有效期" required v-if="form.type === '1' || (form.type === '4' && !form.forever)">
        <el-row>
          <el-col :span="11">
            <el-form-item label-width="0" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                :editable="false"
                type="datetime"
                placeholder="请选择开始时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div style="text-align: center;">-</div>
          </el-col>
          <el-col :span="11">
            <el-form-item label-width="0" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                :editable="false"
                placeholder="请选择结束时间"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <template v-if="form.type === '3'">
        <el-form-item label="循环方式" prop="loopMode">
          <el-select v-model="form.loopMode">
            <el-option
              v-for="item in loopOptions"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" required>
          <el-row>
            <el-col :span="11">
              <el-form-item label-width="0" prop="startTime">
                <el-time-select
                  v-model="form.startTime"
                  :max-time="form.endTime"
                  start="00:00"
                  step="01:00"
                  end="23:00"
                  placeholder="请选择开始时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div style="text-align: center;">-</div>
            </el-col>
            <el-col :span="11">
              <el-form-item label-width="0" prop="endTime">
                <el-time-select
                  v-model="form.endTime"
                  :min-time="form.startTime"
                  start="00:00"
                  step="01:00"
                  end="23:00"
                  placeholder="请选择结束时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="KeyOperationDl">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    defalut: 'add'
  }
})

const loopOptions = ref([{
  label: '周末',
  value: '1'
}, {
  label: '工作日',
  value: '2'
}, {
  label: '周一',
  value: '3'
}, {
  label: '周二',
  value: '4'
}, {
  label: '周三',
  value: '5'
}, {
  label: '周四',
  value: '6'
}, {
  label: '周五',
  value: '7'
}, {
  label: '周六',
  value: '8'
}, {
  label: '周日',
  value: '9'
}, {
  label: '每日',
  value: '10'
}])
const data = reactive({
  form: {
    groupId: null,
    roomId: null,
    name: null,
    type: '1',
    loopMode: null,
    password: null,
    forever: true,
    startTime: '',
    endTime: ''
  },
  formRules: {
    groupId: [{ required: true, message: '请选择分组', trigger: 'change' }],
    roomId: [{ required: true, message: '请选择智能锁', trigger: 'change' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    type: [{ required: true, message: '请选择类型', trigger: 'change' }],
    loopMode: [{ required: true, message: '请选择循环方式', trigger: 'change' }],
    password: [{ required: true, message: '请输入6-9位数字密码', trigger: 'blur' }, { pattern: /^[\d]{6,9}$/, message: '请输入6-9位数字密码', trigger: 'blur' }],
    startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
    endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
  }
})
const { form, formRules } = toRefs(data)

const mobile = computed(() => useAppStore().device === 'mobile')


function handleCancel() {
  emit('cancel')
}

function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      console.log(form.value)
      emit('ok', props.type, form.value)
    }
  })
}
</script>